<template>
  <div class="deal-content p-4">
    <BasicForm @register="registerForm" />
  </div>
</template>
<script lang="ts" setup name="dealContent">
  import { basicSchemas } from './deal.data';
  import { watch, computed, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import modelerStore from '/@/store/modules/bpmnModeler';
  const modeler = modelerStore();
  const props = defineProps({
    tabSiderType: Number,
  });
  const [registerForm, { setFieldsValue, updateSchema, removeSchemaByField, appendSchemaByField }] =
    useForm({
      layout: 'vertical',
      schemas: basicSchemas,
      showActionButtonGroup: false,
    });
  const nodeItem = computed(() => modeler.nodeItem);

  watch(
    () => modeler.getActiveId,

    () => {
      let limitChoiceList = [];
      if (nodeItem.value?.baseInfo?.responseChoices) {
        limitChoiceList = nodeItem.value?.baseInfo?.responseChoices
          ?.split(';')
          .filter((v) => v)
          .map((i, index) => ({
            value: index + 1,
            label: i,
          }));
      }
      nextTick(() => {
        removeSchemaByField('transLimitChoice');
        appendSchemaByField(
          {
            field: 'transLimitChoice',
            label: '多状态处理限制选项',
            component: 'Select',
            colProps: {
              span: 24,
            },
            componentProps: {
              mode: 'multiple',
              onChange: (e) => {
                setTimeout(() => {
                  modeler.setActivitiesItem(modeler.getActiveId, 'transLimitChoice', e);
                });
              },
              options: limitChoiceList,
            },
          },
          '',
        );
        // console.log(
        //   '%cnodeItem.value=========',
        //   'color:#1a2;font-size:30px;font-weight:bold',
        //   nodeItem.value?.handleContent?.transLimitChoice ?? '',
        // );

        setFieldsValue({
          transLimit: nodeItem.value?.handleContent?.transLimit,
          compareCont: nodeItem.value?.handleContent?.compareCont,
          limitCompare: nodeItem.value?.handleContent?.limitCompare,
          transLimitChoice: nodeItem.value?.handleContent?.transLimitChoice ?? [],
          remindAddFlag: nodeItem.value?.remindAddFlag,
        });
      });
    },
  );
  watch(
    () => props.tabSiderType,

    () => {
      let limitChoiceList = [];
      if (nodeItem.value?.baseInfo?.responseChoices) {
        limitChoiceList = nodeItem.value?.baseInfo?.responseChoices
          ?.split(';')
          .filter((v) => v)
          .map((i, index) => ({
            value: index + 1,
            label: i,
          }));
      }
      nextTick(() => {
        updateSchema({
          field: 'transLimitChoice',
          componentProps: {
            mode: 'multiple',
            options: limitChoiceList,
          },
        });
      });
    },
  );
</script>
<style lang="less" scoped>
  .deal-content {
    overflow-y: auto;
    height: calc(100% - 78px);
  }
</style>
